<template>
	<div class="container">
		<Header title="客户详情"></Header>
		<div class="header-wrap">
			<div class="personal-info">
				<span class="name">{{cusPreDetail.name}}</span>
    			<span class="sex" :class="{active: (cusPreDetail.gender==0)}"></span>
    			<!--<span class="label">{{cusPreDetail.customerStatusName}}</span>-->
			</div>
			<ul class="other-list">
				<li><i class="fa fa-mobile"></i>{{cusPreDetail.mobile}}</li>
				<li class="other-list-dial" style="width: 60px; padding: 0; margin-right: 0; float: right;" >
					<i class="fa fa-phone" style="color: rgba(255, 0, 0, 1); margin: 4px 0 0 5px"></i>
					<span class="phone-dial">拨打</span>
				</li>
			</ul>
		</div>
		<div class="info-modular">
			<div class="info-title">
				<i class="fa fa-list-alt"></i>渠道信息
				<div  class="copy-model" @click="toModal"><span  class="phone-dial" style="color: rgb(255, 255, 255);">复制</span></div>
			</div>
			<ul class="channel-list">
				<li>报备类型：{{reportType}}</li>
				<li v-if="isDist == 'T'">报备人：{{cusPreDetail.assistantName}}&nbsp;&nbsp;{{cusPreDetail.assistantPhone}}</li>
				<li>渠道来源：{{cusPreDetail.staffCompanyName}}</li>
				<li>
					经纪人：{{cusPreDetail.staffName}}&nbsp;&nbsp;{{cusPreDetail.staffPhone}}
					<div class="agent-dial">
						<i class="fa fa-phone" style="margin: 6px 0 0 5px; color: #fff"></i>
						<span class="phone-dial" style="color: #fff">拨打</span>
					</div>
				</li>
				<li>渠道经理：{{cusPreDetail.principalName}}&nbsp;&nbsp;{{cusPreDetail.principalPhone}}</li>
				<li>期望带看时间：{{cusPreDetail.visitProtecDate}}</li>
				<li>备注说明：{{cusPreDetail.remark}}</li>
			</ul>
		</div>
		<div class="progress-bar-warp">
			<ul class="progress-bar clearfix">
				<li v-for="(row, index) in customerArray" class="bar-list-line" :class="{'active':row.isActive}">
				    <span class="spot" ></span>{{row.name}}
		    	</li>
			</ul>
			<div class="progress-bar">当前状态：{{currentStatus}}</div>
		</div>
		<div class="info-modular">
			<!--<div class="info-title">
				<i class="fa fa-retweet"></i>跟进信息
			</div>-->
			<ul class="progress-bar-down">
			<li v-for="(ful,index) in cusPreDetail.fulList" @click="analysis(index)">
				<div class="progress-deteil-wrap">
					<div class="progress-deteil">
						<span>{{ful.staffName}}</span>
						<span>{{ful.createTime}}</span>
						<span>{{ful.remark}}</span>
					</div>
				</div>
				<i class="fa fa-chevron-down"></i>
				<i class="fa fa-chevron-up"></i>
			</li>
			</ul>
			<!--<ul class="life-cycle">
				<li v-for="ful in cusPreDetail.fulList">
					<div class="life-cycle-left">
						<span class="circle-o"></span>
						<span class="time">{{ful.createTime}}</span>
						<a href="javascript:;" class="opeBtn">{{ful.newCustomerStatusName}}</a>
					</div>
					<div class="life-cycle-right">
						<p class="cycle-title">{{ful.remark}}</p>
					</div>
				</li>
			</ul>-->
		</div>
		<div class="footer">
	    	<div class="footer-content">
    			<a class="operationBtn btnOne" v-if="cusPreDetail.reportValidShow" @click="distInvalidShow(cusPreDetail)" v-res="{code:'menu_0008_0001_0001'}">无效</a>
    			<a class="operationBtn btnOne" v-if="cusPreDetail.visitedValidShow" @click="distInvalidShow(cusPreDetail)" v-res="{code:'menu_0008_0001_0002'}">无效</a>
                <a class="operationBtn btnTwo" v-if="cusPreDetail.reportValidShow" @click="auditShow(cusPreDetail, 10)"  v-res="{code:'menu_0008_0001_0001'}">报备有效</a>
                <a class="operationBtn btnTwo" v-if="cusPreDetail.visitedValidShow && cusPreDetail.mobile.indexOf('****') < 0" @click="auditShow(cusPreDetail, 6)"  v-res="{code:'menu_0008_0001_0002'}">到访有效</a>
                <a class="operationBtn btnTwo" v-if="cusPreDetail.completeNumberShow" @click="showCompleteNumModel(cusPreDetail)" v-res="{code:'menu_0008_0001_0003'}">补全号码</a>
                <!--a class="operationBtn btnTwo" v-if="cusPreDetail.distBtnShow" style="width:100%" @click="toDistAgent(cusPreDetail.cusPreId)" v-res="{code:'menu_0008_0002_0002'}">分配</a -->
    		</div>
	    </div>
	    <!-- 分配无效弹出层 -->
	    <div class="popup-page" v-if="isShow">
	    	<div class="popup-mask" @click="distInvalidClose"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">无效原因</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li v-for="(item,index) in options" @click="checkedState(item)" :class="{'active':item.isShow}">
							<i class="checkIcon"></i>{{item.name}}
							<input type="checkbox" class="mint-checkbox-input" v-model="item.isShow">
							<textarea v-if="index === 2" class="reason" rows="4" v-model="invalidObj.reason"></textarea>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="distInvalidClose">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="distInValid">确定</a>
	    		</div>
	    	</div>
	    </div>
	    
	    <!-- 补全号码弹出层 -->
	    <div class="popup-page" v-if="completeNum.modelShow">
	    	<div class="popup-mask"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">补全号码</div>
	    		<div class="popup-body">
	    			<div class="complete-information">
	    				<p>请将手机号中间四位补充完整</p>
	    				<div class="information-number">
	    					<span class="existingNumer">{{completeNum.mobilePrefix}}</span>
	    					<div class="number-list">
	    						<span class="number-list-item">{{ userTel.numA }}</span>
	    						<span class="number-list-item">{{ userTel.numB }}</span>
	    						<span class="number-list-item">{{ userTel.numC }}</span>
	    						<span class="number-list-item">{{ userTel.numD }}</span>
	    					</div>
	    					<span class="existingNumer">{{completeNum.mobileSuffix}}</span>
	    					<input type="tel" maxlength="4" class="number-input-box" v-model="completeNum.helfTel">
	    				</div>
	    			</div>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="closeCompleteNumModel">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="completeNumber">确定</a>
	    		</div>
	    	</div>
	    </div>
	    
	    <!-- 状态变更备注 -->
	    <div class="popup-page" v-if="auditObj.showModel">
	    	<div class="popup-mask" @click="auditClose"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">审核备注</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li style="padding-left: 0px;">
							<textarea class="reason" style="display: block;" rows="4" v-model="auditObj.remark"></textarea>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="auditClose">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="auditReport">确定</a>
	    		</div>
	    	</div>
	    </div>
	</div>
</template>
<script>
	import { MessageBox, Toast } from 'mint-ui';
	export default {
		components:{
			MessageBox,
		},
		data () {
		    return {
		      	options:[
		    		{
		    			name:'无效电话号码',
		    			value: "0",
		    			isShow : true
		    		},
		    		{
		    			name:'无购房意向',
		    			value: "1",
		    			isShow : false
		    		},
		    		{
		    			name:'其他',
		    			value: "2",
		    			isShow : false
		    		}
		    	],
		    	isShow:false,
		    	cusPreId: this.$route.params.id,
		    	cusPreDetail: {},
		    	cusFulList: [],
		    	reportType:'经纪人报备',
		    	isDist:'F',
		    	completeNum:{
		      		modelShow: false,
		      		helfTel: '',
		      		mobilePrefix: '',
		      		mobileSuffix: '',
		      		row: {}
		      	},
		      	invalidObj: {
		    		curPreId: '',
		    		remark: '',
		    		row: {},
		    		reason: ''
		    	},
		    	customerArray:[{name:'报备',isActive:false},{name:'到访',isActive:false},{name:'认筹',isActive:false},{name:'认购',isActive:false},{name:'签约',isActive:false},{name:'结佣',isActive:false}],
		    	currentStatus:'',
		    	auditObj: {
		    		showModel: false,
		    		remark: '',
		    		row: {},
		    		status: ''
		    	}
		    }
		},
		computed: {
			userTel () {
		      	let numA,numB,numC,numD
		      	if ((this.completeNum.helfTel).length > 0) {
			        numA = this.completeNum.helfTel.substring(0,1); 
			        numB = this.completeNum.helfTel.substring(1,2);
			        numC = this.completeNum.helfTel.substring(2,3);
			        numD = this.completeNum.helfTel.substring(3,4);
		      	}
		      	return {
		        	numA,numB,numC,numD
		      	}
		    }
		},
		mounted: function() {
	       this.findCusPreDetail();
		},
		methods :{
			findCusPreDetail(){
				var _self = this;
				var params = {};
				params.id = _self.cusPreId;
				var body = {};
				body.params = params;
				var url = _self.utilHelper.apiUrl + "/api/getCPDetail";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					var premisesId = window.sessionStorage.getItem(_self.utilHelper.appAssistant+"_premisesId");
					if("1" == result){
						// if(data.cpDto.premisesId!=premisesId){
						// 	//用于扫码确认
						// 	layer.msg("无此报备记录,建议切换到该报备记录所在项目!");
						// 	return false;
						// }
						var cpDto = data.cpDto;
						var fulList = cpDto.fulList;
						var customerStatus = cpDto.customerStatus;
						var mobile = cpDto.mobile;
						var isDist = cpDto.isDist;
						var visitProtecting = cpDto.visitProtecting;
						//无效按钮
						var reportInValidShow = true;
						if(customerStatus == "-1"){
							reportInValidShow = false;
						}
						//补全号码按钮
						var completeNumberShow = false;
						//报备有效按钮
						var reportValidShow = false;
						//到访有效按钮
						var visitedValidShow = false;

						if(cpDto.customerStatus==0) {
							var reportValidShow = true;
						}
						//如果是未到访，显示到访有效按钮
						if(cpDto.customerStatus==10 && mobile.indexOf("****") >= 0){
							completeNumberShow = true;
							visitedValidShow = false;
						}
						if(cpDto.customerStatus==10 && mobile.indexOf("****") < 0) {
							visitedValidShow = true;
						}
						//分配无效
						var distInValidShow = false;
						//分配按钮
						var distBtnShow = false;
						/*if(!visitProtecting){*/
							/*if("0" == customerStatus && completeNumberShow != true){
								reportValidShow = true;
							}*/
							if("1" == customerStatus){
								visitedValidShow = true;
							}
							if(mobile.indexOf("****") >= 0 && "10" == customerStatus){
								reportValidShow = false;
								completeNumberShow = true;
							}
							if("6" == customerStatus){
								//分配无效展示,报备审核相关无效按钮隐藏
								distInValidShow = true;
								reportInValidShow = false;
							}
							if("6" == customerStatus){
								if("F" == isDist){
									distBtnShow = true;
								}else{
									distBtnShow = false;
									reportInValidShow = false;
									distInValidShow = false;
								}
							}
						/*}else{
							resData.customerStatusName = "报备保护期";
							reportInValidShow = false;
						}*/
						//报备类型
						if(isDist == 'T'){
							this.isDist = 'T';
							this.reportType = '案场代报备';
						}
						cpDto.reportInValidShow = reportInValidShow;
						cpDto.distInValidShow = distInValidShow;
						cpDto.completeNumberShow = completeNumberShow;
						cpDto.reportValidShow = reportValidShow;
						cpDto.visitedValidShow = visitedValidShow;
						cpDto.distBtnShow = distBtnShow;
						_self.cusPreDetail = cpDto;
						_self.currentStatus =cpDto.currentStatusMap.currentStatus;
						//设置按钮亮的个数
						for(var i=0;i<cpDto.currentStatusMap.index;i++){
							_self.customerArray[i].isActive = true;
						}
						_self.cusFulList = fulList;
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	_self.$router.replace({
								path: '/index'
							})
						}, 3000);
					}
				});
			},
			analysis(index){
				var barUl = document.getElementsByClassName("progress-bar-down")[0];
				var appointLiAll = barUl.getElementsByTagName("li")
				var appointLi = barUl.getElementsByTagName("li")[index];
				var deteilAppoint = appointLi.getElementsByClassName('progress-deteil-wrap')[0];
				for(var i=0;i<appointLiAll.length;i++){
					if(i != index){
						appointLiAll[i].setAttribute('class','');
					}
				}
				if(appointLi.getAttribute('class') == "active"){
					appointLi.setAttribute('class','');
				}else{
					appointLi.setAttribute('class','active');  
				}
			},
			reportInvalid(row){
				//报备无效
				var _self = this;
				var body = {};
				body.params = {
					id : row.cusPreId,
					customerStatus : "-1",
					remark : invalidReason
				};
				row.reportInValidShow = false;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	row.reportInValidShow = false;
							row.completeNumberShow = false;
							row.reportValidShow = false;
							row.visitedValidShow = false;
							row.distBtnShow = false;
							_self.findCusPreDetail();
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	row.reportInValidShow = true;
						}, 2000);
					}
				});
			},
			auditShow(row, status) {
				var _self = this;
				_self.auditObj.showModel = true;
				_self.auditObj.row = row;
				_self.auditObj.status = status;
			},
			auditClose() {
				var _self = this;
				_self.auditObj.showModel = false;
			},
			auditReport(){
				var _self = this;
				var auditValue = "";
				var auditReason = "";
				auditReason = _self.auditObj.remark;
				var params = {};
				params.id = _self.auditObj.row.id;
				params.customerStatus = _self.auditObj.status;
				params.remark = _self.auditObj.remark;
				var body = {};
				body.params = params;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					_self.auditObj.showModel = false;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	this.findCusPreDetail();
						  	//报备有效,显示到访有效按钮
						  	if(params.customerStatus == "10"){
						  		_self.auditObj.remark = "";
						  		_self.auditObj.showModel = false;
						  		_self.auditObj.row.reportValidShow = false;
						  		var mobile = _self.auditObj.row.mobile;
						  		/*if(mobile.indexOf("****") >= 0) {
						  			_self.auditObj.row.completeNumberShow = true;
						  		}else {
						  			_self.auditObj.row.visitedValidShow = true;
						  		}*/
						  		_self.auditObj.row.customerStatusName = "到访有效";
						  	}else if(params.customerStatus == "6"){
						  		_self.auditObj.remark = "";
						  		_self.auditObj.showModel = false;
						  		_self.auditObj.row.visitedValidShow = false;
								_self.auditObj.row.reportInValidShow = false;
								/*_self.auditObj.row.distBtnShow = true;
								_self.auditObj.row.distInValidShow = true;
							  	_self.auditObj.row.customerStatusName = "已到访";*/
						  	}
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
                        this.findCusPreDetail();
						setTimeout(() => {
						  	instance.close();
						}, 2000);
					}
				});
			},
			showCompleteNumModel(row){
				//补全号码
				var _self = this;
				_self.completeNum.modelShow = true;
				//号码前三后四
				_self.completeNum.mobilePrefix = row.mobile.substring(0,3);
				_self.completeNum.mobileSuffix = row.mobile.substring(7,11);
				_self.completeNum.row = row;
			},
			closeCompleteNumModel() {
				var _self = this;
				_self.completeNum.modelShow = false;
			},
			completeNumber() {
				var _self = this;
				var curPreId = _self.completeNum.row.id;
				var wholeMobile = _self.completeNum.mobilePrefix + _self.completeNum.helfTel + _self.completeNum.mobileSuffix;
				if(!wholeMobile||wholeMobile.length!=11){
					layer.msg("手机号不全，请补充完整");
					return false;
				}
				var body = {};
				body.params = {
					id : curPreId,
					mobile : wholeMobile
				};
				_self.completeNum.row.completeNumberShow = false;
				var url = _self.utilHelper.apiUrl + "/api/completePhone";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						    //补全号码成功,显示无效、审核有效按钮
						 	_self.completeNum.row.completeNumberShow = false;
						 /*	_self.completeNum.row.visitedValidShow = true;*/
							_self.completeNum.row.distBtnShow = false;
							_self.completeNum.modelShow = false;
							_self.completeNum.row.mobile = wholeMobile;
						  	_self.findCusPreDetail();
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	_self.completeNum.row.completeNumberShow = true;
						}, 2000);
					}
				});
			},
			reportValid(row){
				//报备有效
				var _self = this;
				var params = {};
				params.id =row.cusPreId;
				params.customerStatus = "1"; //无效状态
				var body = {};
				body.params = params;
				row.reportValidShow = false;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var body = response.body;
					var result = body.result;
					var errorMsg = body.errorMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	//报备有效,显示到访有效按钮
						  	row.visitedValidShow = true;
						  	row.customerStatusName = "报备有效";
						  	_self.findCusPreDetail();
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	row.reportValidShow = true;
						}, 2000);
					}
				});
			},
			visitedValid(row){
				//到访有效
				var _self = this;
				var params = {};
				params.id =row.cusPreId;
				params.customerStatus = "6"; //无效状态
				var body = {};
				body.params = params;
				row.visitedValidShow = false;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
							//隐藏改行
							row.distBtnShow = true;
							_self.findCusPreDetail();
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	row.visitedValidShow = true;
						}, 2000);
					}
				});
			},
			toDistAgent(id) {
				var _self = this;
				_self.$router.replace({
					path: '/distribution/'+id
				})
			},
			distInvalidShow(row) {
				var _self = this;
				_self.isShow = true;
				_self.invalidObj.row = row;
			},
			distInvalidClose() {
				this.isShow = false;
			},
			distInValid() {
				var _self = this;
				var invalidValue = "";
				var invalidReason = "";
				_self.options.forEach(function(options,index){
					if(options.isShow == true){
						invalidValue = options.value;
						invalidReason = options.name;
					}
				});
				if("2" == invalidValue){
					invalidReason = _self.invalidObj.reason;
					if(!invalidReason){
						Toast({
						  	message: "请填写报备无效原因!",
						  	position: 'middle',
						  	duration: 2000
						});
						return false;
					}
				}
				var params = {};
				params.id = _self.cusPreId;
				params.customerStatus = "-1";
				params.remark = invalidReason;
				var body = {};
				body.params = params;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  		/*_self.completeNum.row.reportInValidShow = true;
							_self.completeNum.row.reportValidShow = true;*/
							_self.completeNum.row.visitedValidShow = false;
							_self.completeNum.row.distBtnShow = false;
							_self.completeNum.row.distInValidShow = false;
						  	_self.invalidObj.row.rowShow = false;
						  	_self.isShow = false;
						  	_self.findCusPreDetail();
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						}, 2000);
					}
				});
			},
			checkedState (item) {
				this.options.forEach(function(options,index){
					options.isShow = false;
				})
				item.isShow = true;
			},
            //查看模板
            toModal(){
                this.$router.push({
                    name: 'CustomerModel',
                    params:{
                        cusPre:this.cusPreDetail
                    }
                })
            }
		}
	}
</script>
<style scoped>
	.header-wrap{height: 96px;width: 100%;background: url(../../assets/images/headerBg.jpg) no-repeat left top;background-size: 100% auto;padding: 20px 10px 0;}
	.personal-info{height: 20px;position: relative;}
	.personal-info .name{color: #fff;margin-right: 10px;float: left;line-height: 22px;}
	.personal-info .sex{width: 18px;height: 16px;overflow: hidden;background: url(../../assets/images/sex.png) no-repeat;background-size: 32px auto;margin-right: 4px;background-position: 0 0;float: left;border:1px solid #fff;margin-top: 3px;}
	.personal-info .sex.active{background-position: -16px 0; }
	.personal-info .label{height: 16px;background-color: #f24055;color: #fff;font-size: 12px;padding: 0 6px;float: left;line-height: 14px;margin-top: 3px;border:1px solid #fff;}
	.other-list{padding-left: 38px;margin-top: 10px;height: 36px;}
	.other-list li{color: #fff;padding-left:18px;position: relative;float: left;margin-right: 16px;width: 110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.other-list .fa{position: absolute;left: 0;top: 1px;color: #fff;font-size: 16px;}

	.info-modular{background-color: #fff;border-bottom: 1px solid #cdcdcd;margin-bottom:40px;padding-bottom: 40px;}
	.info-title{height: 32px;line-height: 32px;background-color: #f0f0f0;padding: 0 10px 0 35px;position: relative;color: #333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.info-title .fa{position: absolute;left: 10px;top: 7px;color: #eb6100;font-size: 17px;}

	.channel-list{padding: 10px;}
	.channel-list li{margin-bottom: 10px;}
	.life-cycle{padding:0 10px;}
	.life-cycle li{padding: 12px 0 0 120px;border-left: 1px solid #eb6100;position: relative;text-align: center;}
	.life-cycle-left{width:120px;padding-left: 14px;position: absolute;left: 0;top: 12px;}
	.life-cycle-left .circle-o{position: absolute;left: -6px;top: 20px;color: #eb6100;width: 11px;height: 11px;border:2px solid #eb6100;background-color: #fff;border-radius: 6px;}
	.life-cycle-left .time{width: 106px;display: inline-block;}
	.life-cycle-left .opeBtn{width: 105px;height: 24px;border: 1px solid #22b7a5;line-height: 22px;border-radius: 60px;display: block;margin: 10px auto 0;color: #22b7a5;}
	.life-cycle-left .opeA{border: 1px solid #3e87ea;color: #3e87ea;}
	.life-cycle-right{border-bottom: 1px solid #cdcdcd;min-height: 82px;padding-bottom: 12px;}
	.life-cycle-right .cycle-title{min-height: 46px;text-align: left;}
	.life-cycle-right .identification{position: relative;padding-left: 24px;display: inline-block;color: #eb6100;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 100%;}
	.identification .fa{position: absolute;left:1px;top: 3px;}
	.life-cycle li:last-child .life-cycle-right{border-bottom: none;}


	/*底部按钮*/
	.footer{position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;}
	.footer-content .operationBtn{float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;}
	.footer-content .btnOne{background-color: #fff;border-top: 1px solid #cdcdcd;color: #333;}
	.footer-content .btnTwo{background-color: #eb6100;color: #fff;}

	.footer-content:after,.personal-info:after,.other-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.invalid-list li{position: relative;padding-left: 24px;line-height: 20px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 10px;}
	.checkIcon{position: absolute;left: 0;width: 18px;height: 18px;background:url(../../assets/images/checked.png) no-repeat;background-position: 0 0;background-size: 36px auto;top: 1px;}
	.invalid-list li:last-child{margin-bottom: 0;}
	.invalid-list .active .checkIcon{background-position: -18px 0;}
	.invalid-list .reason{border: 1px solid #cdcdcd;width: 100%;margin-top: 4px;display: none;}
	.invalid-list .active .reason{display: block;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}
	
	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}

	.complete-information{text-align: center;}
	.information-number{position: relative;line-height: 34px;padding-left: 8px;margin-top: 8px;}
	.information-number .existingNumer,.information-number .number-list{float: left;}
	.existingNumer{display: inline-block;}
	.number-list{display: inline-block;border-radius: 4px;border:1px solid #cdcdcd;height: 34px;line-height: 32px;margin: 0 6px;}
	.number-list .number-list-item{width: 30px;height: 100%;display: inline-block;border-right: 1px solid #cdcdcd;float: left;}
	.number-list .number-list-item:last-child{border-right: none;}
	.number-input-box{position: absolute;height: 34px;left: 40px;width: 135px;opacity: 0;}

	.footer-content:after,.information-number:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
	
	.progress-bar-warp{padding:8px 10px;background-color: #fff;}
	.progress-bar{padding:0 10px;background-color: #f8f8f8;}
	.progress-bar .bar-list-line{position: relative;width: 16%;float: left;border-top: 1px solid #dcdcdc;margin-top: 20px;text-align: center;height: 46px; padding-top: 14px; height: 54px;}
	.progress-bar .bar-list-line.active{color: #ff8e3b;border-top: 1px solid #ff8e3b;}
	.bar-list-line .spot{position: absolute;width: 12px;height: 12px;top: -6px;left: 50%;margin-left: -6px;background:url(../../assets/images/spot.png) no-repeat;background-size: 12px auto; background-position: 0 0;}
	.bar-list-line.active .spot{background-position: 0 -12px;}
	
	.progress-bar-down li{border-bottom: 1px solid #dcdcdc;padding: 0 30px 0 10px;background-color: #fff;position: relative;}
	.progress-bar-down li .fa{position: absolute;right: 10px;top: 12px;}
	.progress-bar-down li .fa-chevron-down,.progress-bar-down li.active .fa-chevron-up{display: block;}
	.progress-bar-down li .fa-chevron-up,.progress-bar-down li.active .fa-chevron-down{display: none;}
	.progress-bar-down .progress-deteil-wrap{height: 36px;overflow: hidden;}
	.progress-bar-down li.active .progress-deteil-wrap{height: auto;}
	.progress-bar-down .progress-deteil{line-height: 24px;padding-top: 6px;min-height: 36px;}
	.progress-deteil>span{margin-right: 4px;}
	.progress-deteil>span:last-child{margin-right: 0;}
	.font-color{color:#ccc;}
	.clearfix{  *zoom:1;  }
	.clearfix:after{  content: "";  display: block;  clear: both;  }
	.operation-btn{width:50%;text-align: center;height: 40px; }

	.other-list-dial {
		height: 25px;
		background: #fff;
		border-radius: 50px; 
		position: relative;
		top: -2px;
	}
	.other-list-dial .phone-dial {
		position: relative;
		top: 2px;
		color: rgba(255, 0, 0, 1);
		margin-left: 22px
	}
	.info-modular .agent-dial {
		width: 60px;
		height: 25px;
		background:rgba(255, 0, 0, 1);
		border-radius: 50px; 
		position: relative;
		top: -2px;
		float: right
	}
	.copy-model{
		margin-top: 3px;
		width: 60px;
		height: 25px;
		line-height: 25px;
		background: #eb6100;
		border-radius: 50px;
		float: right;
		text-align: center;
	}
</style>